<template>
  <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
    <view v-if="showBack" class="left" @tap="goBack">
      <text class="back-icon"> 〈 </text>
    </view>
    <view class="title">{{ title }}</view>
    <view class="right-slot">
      <slot name="right"></slot>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { system } from '@/utils'

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  showBack: {
    type: Boolean,
    default: false
  }
})

const statusBarHeight = ref(0)

onMounted(() => {
  // 获取状态栏高度
  statusBarHeight.value = system.getStatusBarHeight()
})

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}
</script>

<style lang="scss">
.nav-bar {
  height: 88rpx;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  background: #fff;
  position: relative;
  z-index: 100;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .left {
    position: absolute;
    left: 30rpx;
    z-index: 10;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30rpx;
    background: rgba(245, 245, 245, 0.5);
    transition: all 0.2s ease;

    .back-icon {
      font-size: 36rpx;
      color: #333;
      font-weight: 300;
    }
    
    &:active {
      background: rgba(230, 230, 230, 0.8);
      transform: scale(0.95);
    }
  }
  
  .title {
    width: 100%;
    text-align: center;
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    letter-spacing: 1rpx;
    position: relative;
    
    &:after {
      content: '';
      position: absolute;
      bottom: -12rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 30rpx;
      height: 4rpx;
      border-radius: 10rpx;
      background: #5677fc;
      opacity: 0.8;
    }
  }
  
  .right-slot {
    position: absolute;
    right: 30rpx;
  }
}
</style>